<template>
    <section class="tag_select">
        <el-select v-model="selected" placeholder="请选择标签" @change="onchange" clearable filterable>
            <el-option v-for="item in items" :key="item.id" :label="item.name" :value="item.id" :value-key="item.id">
                <div>{{ item.name }}</div>
            </el-option>
        </el-select>
    </section>
</template>

<script>
import _api from '@/common/api/tag'
export default {
    props: {
        value: {
            type: Number | String,
            default: null,
        }
    },
    data() {
        return {
            items: [],
            selected: this.value
        }
    },
    watch: {
        value() {
            this.selected = this.value;
        }
    },
    methods: {
        async getItems() {
            const result = await _api.getAsyncList({
                pageSize: 999,
                pageIndex: 1
            });

            this.items = result.data.map(m => ({ id: String(m.id), name: m.name }));
            console.log(this.items);
        },
        onchange(value) {
            this.$emit("input", value);
        }
    },
    created() {
        this.getItems();
    }
}
</script>

<style></style>